<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="referrer" content="no-referrer" />
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="//at.alicdn.com/t/c/font_3568373_nydbx9itwrr.js"></script>
    <style>
        #mess{
            width: 1000px;
            margin-left: 100px;
            height: 100%;
            /*background-color: bisque;*/
        }
        #top{
            margin-left: -100px;
            padding-left: 100px;
            padding-right: 100px;
            height: 140px;
            width: 1100px;
            position: fixed;
            box-shadow: 0 15px 10px -15px rgb(195, 195, 195);
            /*margin-top: -130px;*/
            margin-top: -180px;
            z-index: 999;
            background-color: white;
        }

        .title{
            display: inline-block;
            width: 700px;
            /*margin-top: 30px;*/
            font-size: 25px;
            /*background-color: #616362;*/
            height: 80px;
            line-height: 40px;
        }

        /*发布问题*/
        #request-div{
            width: 160px;
            /*border: 2px solid;*/
            height: 45px;
            float: right;
            margin-right: 30px;
            background-color: rgb(74,151,248);
            border-radius: 10px;
            cursor: pointer;
            margin-top: 20px;

        }
        #request{
            display: inline-block;
            /*margin-top: -30px;*/
            height: 40px;
            width: 80px;
            border: none;
            font-size: 16px;
            background-color: rgb(74,151,248);
            cursor: pointer;
        }
        #tiwen{
            float: left;
            width: 35px;
            height: 45px;
            margin-left: 20px;
        }
    /*    回答问题*/
        #response-div{
            width: 140px;
            height: 45px;
            background-color:rgb(55,247,173) ;
            /*background: linear-gradient(90deg,red,blue);*/
            /*border: 2px solid;*/
            border-radius: 10px;
            cursor: pointer;
        }
        #btn{
            display: inline-block;
            /*margin-top: -30px;*/
            height: 40px;
            width: 80px;
            border: none;
            font-size: 16px;
            background-color:rgb(55,247,173) ;
            cursor: pointer;
        }
        #bianji{
            float: left;
            width: 35px;
            height: 45px;
            margin-left: 10px;
        }
        .block{
            height: 100px;
            width: 100px;
        }
        .outer{
            /*margin-top: 60px;*/
        }
        #mess .outer:first-child{
            margin-top: -30px;
        }
        .answer{
            border-bottom: 1px dashed rgb(97,99,98) ;
            width: 800px;
            height: 120%;
            /*background-color: #00B7FF;*/
            padding: 30px;
            line-height: 30px;
            white-space: pre-wrap;
        }
        /*回答*/
        .answer p{

        }
        /*超链接颜色*/
        a{
            color: rgb(63,136,191);
        }
        /*更多回答*/
        #more{
            margin-top: 30px;
            width: 850px;
            margin-left: 100px;
            height: 40px;
            /*background-color: red;*/
            border-top: 1px dashed rgb(97,99,98) ;
            border-bottom: 1px dashed rgb(97,99,98) ;
            text-decoration: underline;
            text-align: center;
            line-height: 60px;
            margin-bottom: 80px;
            cursor: pointer;
        }
        #more:hover{
            background-color: rgb(227,229,230);
        }
        /*#more p{*/
        /*    display: inline-block;*/
        /*    height: 20px;*/
        /*}*/
        /*#more p:hover{*/
        /*    color: rgb(77,200,111);*/
        /*}*/
        #xiangxai{
            width: 20px;
            height:20px;
        }
    /*    折叠回答*/
        /*更多回答*/
        #less{
            margin-top: 30px;
            width: 850px;
            margin-left: 100px;
            height: 40px;
            /*background-color: red;*/
            border-top: 1px dashed rgb(97,99,98) ;
            border-bottom: 1px dashed rgb(97,99,98) ;
            text-decoration: underline;
            text-align: center;
            line-height: 20px;
            margin-bottom: 80px;
            cursor: pointer;
        }
        #less:hover{
            background-color: rgb(227,229,230);
        }

        #xiangshang{
            width: 20px;
            height:20px;
        }
    /*    问题无答案*/
        .null{
            border-bottom: 1px dashed rgb(97,99,98) ;
            width: 800px;
            height: 120%;
            /*background-color: #00B7FF;*/
            padding: 30px;
            line-height: 30px;
            white-space: pre-wrap;
        }
        .null p{
            margin-left: 50px;
            font-size: 20px;
        }
        #tishi{
            width: 100px;
            height: 100px;
        }
    /*    暂无更多回答*/
        .hint{
            margin-top: 20px;
            margin-bottom: 80px;
            text-align: center;
        }

    </style>

</head>
<body>
<img src="">
<video></video>
    <div id="mess">
        <div id="top">
            <!--放标题-->
            <span class="title"></span>

            <!--       发布问题-->
            <div id="request-div">
                <button id="request">发布问题</button>
                <svg class="icon" aria-hidden="true" id="tiwen">
                    <use xlink:href="#icon-tiwen-xianxing"></use>
                </svg>
            </div>
            <br>
            <!--        回答问题-->
            <div id="response-div">
                <button id="btn">我来回答</button>
                <svg class="icon" aria-hidden="true" id="bianji">
                    <use xlink:href="#icon-bianji1"></use>
                </svg>
            </div>
        </div>
<!--        <div class="block">-->

<!--        </div>-->
        <div class="null">
            <svg class="icon" aria-hidden="true" id="tishi">
                <use xlink:href="#icon-tishi"></use>
            </svg>
            <p>此问题还暂无回答哦~</p>
            <a href="javascript:;">我来回答</a>
        </div>
    </div>
    <div id="more">
<!--        <p>更多回答</p>-->
        <svg class="icon" aria-hidden="true" id="xiangxai">
            <use xlink:href="#icon-xiangxiazhanhang"></use>
        </svg>
    </div>
    <div id="less">
        <!--        <p>更多回答</p>-->
        <svg class="icon" aria-hidden="true" id="xiangshang">
            <use xlink:href="#icon-xiangshangzhanhang"></use>
        </svg>
    </div>
  <script>
      $(function (){
          //更多回答内容不可见
          $('#more').css('display','none')
          //向上折叠不可见
          $('#less').css('display','none')
          //问题为空时
          $('.null').css('display','none')

          console.log(window.location.search)
          var all = window.location.search;
          var file = all.split('?')
          var txt =file[1] + '.txt'
          console.log(txt)
          //  获取问题题目
          $.ajax({

          })
          //  获取问题内容
          $.ajax({
              url:'http://192.168.144.98:8080/love/qq/getReplay/'+txt,
              //  http://192.168.144.98:8080/love/qq/getReplay/xxxxxx.txt这样不是txt？对txt
              type:'type',
              data:' ',
              // success:function (data){
              //     console.log('success')
              //     var arr = JSON.parse(data)
              //     // console.log(obj)
              //     console.log(data)
              //     console.log(arr.title)
              // }
              success:function (data){
                  //提取视频链接

                  var obj = JSON.parse(data)
                  $('.title').text(obj.title)
                  console.log(data)
                  console.log(obj.arr)
                  // console.log(obj)
                  //当问题无答案时
                  if(obj.arr.length==0){
                      $('.null').css('display','block')
                  }
                  //当问题答案只有一条时

                  if(obj.arr.length!=0){
                      // 显示第一条回答
                      //回答一：
                      var p = $('<p></p>')
                      p.html("回答1:")
                      //放置答案
                      var div1 =$('<div class="answer"></div>')
                      div1.html(obj.arr[0])
                      var div2 = $('<div class="outer"></div>')
                      div2.append(p)
                      div2.append(div1)
                      $('#mess').append(div2)
                  }
                  if(obj.arr.length==1){
                      var p2 = $('<p class="hint">暂无更多回答……</p>')
                      $("#mess").append(p2)
                  }
                  //  如果回答内容多于一条，则显示更多内容
                  if(obj.arr.length>1) {
                      $('#more').css('display', 'block')

                      //点击更多回答，显示其余答案
                      $('#more').click(function () {
                          for (let index = 1; index < obj.arr.length; index++) {
                              var p = $('<p></p>')
                              var n=index+1
                              p.html("回答"+n+":")
                              //放置答案
                              var div1 =$('<div class="answer"></div>')
                              div1.html(obj.arr[index])
                              var div2 = $('<div class="outer"></div>')
                              div2.append(p)
                              div2.append(div1)
                              $('#mess').append(div2)
                              //    向下转为向上收起
                              $('#more').css('display', 'none')
                              $('#less').css('display', 'block')
                          }
                      })
                  }
              //    点击向上图标折叠答案
                  $('#less').click(function (){
                      for(let index=1;index<obj.arr.length;index++){
                          $('#mess').children().last().remove();
                      }
                      $('#less').css('display','none')
                      $('#more').css('display','block')
                  })
              }
          })
      })

  </script>
</body>
</html>